<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="s1" multiple size="10">
<!--    初始有10项-->
    <option>请选择</option>
</select>
<select id="s2" multiple size="10">
    <option>请选择</option>
</select>
<button type="button" onclick="left2right()">从左到右</button>
<button type="button" onclick="right2left()">从右到左</button>
<script>
    let s1 = document.querySelector("#s1");
    let s2 = document.querySelector("#s2");

    // 初始化s1数据
    for (let i = 0; i < 10; i++) {
        let opt = document.createElement("option");
        opt.text = i;
        s1.add(opt);
    }

    function left2right() {
        console.log(1)
        // 从左到右
        // for (let i = 0; i < s1.selectedOptions.length; i++) {
        //     s2.add(s1.selectedOptions[i]);
        // }
        while (s1.selectedOptions.length != 0) {
            s2.add(s1.selectedOptions[0]);
        }
    }

    function right2left() {
        console.log(2)
        // for (let i = 0; i < s2.selectedOptions.length; i++) {
        //     s1.add(s2.selectedOptions[i]);
        // }
        while (s2.selectedOptions.length != 0) {
            s1.add(s2.selectedOptions[0]);
        }
    }
</script>
</body>
</html>